<template>
    <div class="box">
        <div class="detail-before img-list">
            <img src="https://ss.lanqb.com/2b8110f9-7148-4b07-96d1-8e2f7c1486df" class="detail-img">
            <img src="https://ss.lanqb.com/5def38c5-7c50-4d86-9fc6-a47d8ced7726" class="detail-img">
            <img src="https://ss.lanqb.com/28ea6c31-a6a6-4e03-8042-5aa0d639fd03" class="detail-img">
            <img src="https://ss.lanqb.com/821ead20-9ee4-44cf-8318-e94e26077a3d" class="detail-img">
            <img src="https://ss.lanqb.com/1157de27-aaa1-4340-8002-33cafdb9b5a9" class="detail-img">
            <img src="https://ss.lanqb.com/56c1c7fb-8ee0-4e66-a8b0-c05829f76017" class="detail-img">
        </div>
        <div class="detail-center">
          <motai :width="'21.92708333%'" :height="'50%'" :top="0" :left="0" :src="'https://ss.lanqb.com/0e48a211-9b59-4a81-834f-0baaebd90b5f.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'50%'" :top="'50%'" :left="0" :src="'https://ss.lanqb.com/7f6af31f-3a9a-460d-b2b6-1b675d2ae10d.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="0" :left="'21.92708333%'" :src="'https://ss.lanqb.com/cce180dc-48ab-4429-8b2a-d7c6afff5091.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="0" :left="'43.85416667%'" :src="'https://ss.lanqb.com/134843da-26bf-4c07-b427-27b657659606.jpg'"> </motai>
          <motai :width="'34.21875%'" :height="'33.33333333%'" :top="0" :left="'65.78125%'" :src="'https://ss.lanqb.com/190b040b-dfc4-4ec6-82aa-4aea0d926b75.jpg'"> </motai>
          <motai :width="'34.21875%'" :height="'33.33333333%'" :top="'33.33333333%'" :left="'21.92708333%'" :src="'https://ss.lanqb.com/cb28d818-2ebe-43e5-82e3-485bef62579a.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'33.33333333%'" :left="'56.14583333%'" :src="'https://ss.lanqb.com/28e0e41e-01cf-4511-a539-7814a2f3cc9c.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'33.33333333%'" :left="'78.07291667%'" :src="'https://ss.lanqb.com/c7fd5d20-2a50-4e8f-9405-71d9d0c8fea2.jpg'"> </motai>

          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'66.66666667%'" :left="'21.92708333%'" :src="'https://ss.lanqb.com/69b43866-36db-474c-83ae-0e6861d194ea.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'66.66666667%'" :left="'43.85416667%'" :src="'https://ss.lanqb.com/2694b984-9a94-4c54-92d3-7965bbffe632.jpg'" > </motai>
          <motai :width="'34.21875%'" :height="'33.33333333%'" :top="'66.66666667%'" :left="'65.78125%'" :src="'https://ss.lanqb.com/c4e9b81a-c616-45b0-8c94-3d11def8d497.jpg'"> </motai>
        </div>  

        <div class="detail-after img-list">
            <img src="https://ss.lanqb.com/73b5d112-6578-423e-ae2d-90018b61fc5a" class="detail-img">
            <img src="https://ss.lanqb.com/0a4c46e1-be16-47a9-98c2-1c6233790f8b" class="detail-img">
            <img src="https://ss.lanqb.com/ab98a4cf-d08f-40d8-847f-1011feddcdbd" class="detail-img">
            <img src="https://ss.lanqb.com/0bec9539-0808-4945-820c-4b9f09a24180" class="detail-img">
            <img src="https://ss.lanqb.com/426b5b3d-9262-4a51-b659-ce73763a1efe" class="detail-img">
            <img src="https://ss.lanqb.com/c9ac573b-53b3-4bd2-835d-41944485bf98" class="detail-img">
            <img src="https://ss.lanqb.com/0bc2ffb4-2869-444e-8225-75ed6d0be193" class="detail-img">
            <img src="https://ss.lanqb.com/2e3c1f6e-52ac-44e3-b0be-a7c3c1063961" class="detail-img">
        </div>
    </div>
</template>
<script>
import motai from '@/views/courseDetail/components/motai.vue'
export default {
  components: { motai },

}
</script>
<style lang="scss" scoped>
.box {
  max-width: 1920px;
  margin-right: auto;
  margin-left: auto;
}
.img-list{
  .detail-img {
    display: block;
    width: 100%;
  }
}
.detail-center{
  position: relative;
    width: 100%;
    height: 1002px;
    // width: 1002px;
    margin-right: auto;
    margin-left: auto;
}
</style>